<template>
  <div id="centerRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="align-left" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2">顶刊创新成果学科分布</span>
      </div>
      <div class="d-flex ai-center flex-column body-box">
        <dv-capsule-chart class="dv-cap-chart" :config="config" />
        <!--        <centerRight2Chart1 />-->
      </div>
    </div>
  </div>
</template>

<script>
import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
import { mapActions } from "vuex";
import * as XLSX from 'xlsx';
import xlsxFile from '../assets/data/data.xlsx';

export default {
  data() {
    return {
      userData: {
        id: ''
      },
      config: {
        // data: [
        //   {
        //     name: '物理',
        //     value: 2655
        //   },
        //   {
        //     name: '生命科学',
        //     value: 1933
        //   },
        //   {
        //     name: '地球科学',
        //     value: 1387
        //   },
        //   {
        //     name: '化学',
        //     value: 1311
        //   },
        //   {
        //     name: '材料科学',
        //     value: 1045
        //   },
        //   {
        //     name: '环境科学',
        //     value: 888
        //   },
        //   {
        //     name: '数学',
        //     value: 1091
        //   },
        //   {
        //     name: '能源科学',
        //     value: 973
        //   },
        //   {
        //     name: '环境航天',
        //     value: 104
        //   },
        //   {
        //     name: '天文',
        //     value: 77
        //   },
        //   {
        //     name: '核科学',
        //     value: 43
        //   }
        // ],
        data: []
      }
    }
  },
  mounted() {
    this.userData.id = this.$store.state.user.userInfo.id;
    console.log(this.userData.id, 'centerRight1 userData.id');
    console.log('centerRight1 mounted');
    this.init();
  },
  methods: {
    ...mapActions(['topTenRiskPlace']),
    async init() {
      try {
        const response = await fetch(xlsxFile);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const arrayBuffer = await response.arrayBuffer();
        const workbook = XLSX.read(arrayBuffer, { type: 'array' });

        const sheetName = '学科分布';
        const worksheet = workbook.Sheets[sheetName];
        if (!worksheet) {
          throw new Error('找不到工作表: 学科分布');
        }

        const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        for (let i = 1; i < data.length; i++) {
          const name = data[i][0];
          const value = Number(data[i][1]); // 强制转成数字
          if (name && !isNaN(value)) {      // 过滤空值/无效行
            this.config.data.push({ name, value });
          }
        }
      } catch (error) {
        console.error('读取文件时出错:', error);
      }

      this.config = {
        ...this.config,
        showValue: true, // 显示数值
        label: {
          fontSize: 18,      // 🔹标签字体大小
          color: '#fff',     // 🔹标签字体颜色
          fontWeight: 'bold' // 🔹可选，加粗
        },
        value: {
          fontSize: 16,      // 🔹数值字体大小
        }
      };

      console.log('centerRight2 config:', this.config);
    }
  },
  components: { centerRight2Chart1 }
}
</script>

<style lang="scss" scoped>
$box-width: 510px;
$box-height: 370px;

#centerRight2 {
  padding: 10px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    padding: 5px;
    height: $box-height - 10px;
    //width: $box-width;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
    font-size: 20px;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-cap-chart {
      width: 100%;
      height: 330px;
    }
  }
}
</style>
